<template>
  <div class="field-filter-table">
    <avue-crud
      ref="crud"
      :option="tableOption"
      :data="tableData"
      :class="tableOption.selection ? '' : 'mb-4 pr-4'"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
    >
    </avue-crud>
  </div>
</template>
<script>
const TERM_OPTIONS = [
  {
    label: '通用',
    groups: [
      { value: 'eq', label: '等于' },
      { value: 'not_eq', label: '不等于' },
    ],
  },
  {
    label: '数值',
    groups: [
      { value: 'lt', label: '小于' },
      { value: 'gt', label: '大于' },
      { value: 'le', label: '小于等于' },
      { value: 'ge', label: '大于等于' },
    ],
  },
  {
    label: '文本',
    groups: [
      { value: 'like', label: '包含' },
      { value: 'not_like', label: '不包含' },
      { value: 'empty', label: '空字符串' },
      { value: 'not_empty', label: '非空字符串' },
    ],
  },
  {
    label: '其他',
    groups: [
      { value: 'null', label: '为空' },
      { value: 'not_null', label: '不为空' },
    ],
  },
]

export default {
  props: {
    size: { type: String, default: '' }, // 大小
    dimensions: { type: Array, default: () => [] },
    value: { type: Array, default: () => [] },
  },
  data() {
    return {
      tableData: [],
      tableOption: {
        rowKey: 'fieldId',
        border: true,
        strip: true,
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        selection: false,
        cellBtn: true,
        addBtn: false,
        addRowBtn: true,
        menu: true,
        searchShow: false,
        searchMenuSpan: 8,
        searchMenuPosition: 'left',
        column: [
          {
            label: '维度',
            prop: 'fieldId',
            type: 'select',
            dicData: [],
            props: { label: 'name', value: 'id' },
            span: 24,
            rules: [{ required: true, message: '请选择维度' }],
            cell: true,
          },
          {
            label: '操作符',
            prop: 'term',
            type: 'select',
            group: true,
            dicData: TERM_OPTIONS,
            span: 24,
            rules: [{ required: true, message: '请选择操作符' }],
            cell: true,
          },
          {
            label: '筛选值',
            prop: 'value',
            span: 24,
            rules: [{ required: true, message: '请填写筛选值' }],
            cell: true,
          },
        ],
      },
    }
  },
  watch: {
    dimensions(val) {
      this.init()
    },
  },
  methods: {
    init() {
      const column = this.findObject(this.tableOption.column, 'fieldId')
      column.dicData = this.dimensions

      this.tableData = this.value
        .filter((item) => item.filter && item.filter.length > 0)
        .map((item) => ({
          fieldId: item.filter[0].fieldId,
          term: item.filter[0].term,
          value: item.filter[0].value,
        }))
    },
    onValueChange() {
      console.log('onValueChange', this.tableData)
      this.$emit('change', this.tableData)
    },
    onRowSave(row, done, loading) {
      this.onValueChange()
      done()
    },
    onRowUpdate(row, index, done, loading) {
      this.onValueChange()
      done()
    },
    async onRowDelete(row, index) {
      try {
        await this.$confirm(`确定删除第${index + 1}行吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch (error) {
        console.log('取消')
        return
      }

      this.tableData = this.tableData.filter((_, i) => i !== index)
      this.onValueChange()
    },
  },
}
</script>
<style lang="scss">
.field-filter-table {
  .el-empty__image {
    display: none;
  }
}
</style>
